<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>上传图片</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <style>
        .img-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-top: 20px;
        }
        .img-item {
            width: calc(33.33% - 10px);
            margin-bottom: 10px;
            position: relative;
        }
        .img-item img {
            width: 100%;
            height: auto;
        }
        .img-item .delete-btn {
            position: absolute;
            top: 5px;
            right: 5px;
            background-color: #f00;
            color: #fff;
            border: none;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            font-size: 12px;
            line-height: 20px;
            text-align: center;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="container">
    <button type="button" class="btn btn-secondary" id="backBtn">返回</button>
    <h1>上传图片</h1>
    <label for="name">客户姓名</label>
    <input type="text" class="form-control" id="name" name="name" th:value="${customer.name}">
    <form id="upload-form">
        <div class="form-group">
            <label for="image-input">选择图片</label>
            <input type="file" class="form-control-file" id="image-input" accept="image/*" multiple>
        </div>
        <button type="submit" class="btn btn-primary">上传</button>
    </form>
    <div class="img-container"></div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script>
    $(function() {111111
        var uploadedImages = []; // 已上传的图片列表
        var fileList = [];
        // 监听文件选择框变化
        $('#image-input').on('change', function() {
            var files = $(this)[0].files;
            console.log("每次监听文件选择框变化-----，获取的files,看看file的变化")
            console.log(files);
            console.log(files.length);
            if (files.length > 6) {
                alert('最多只能上传6张图片');
                return;
            }
            // 遍历文件列表，生成预览图
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                console.log(file);
                if (!/image\/\w+/.test(file.type)) {
                    alert('请选择图片文件');
                    continue;
                }
                if (uploadedImages.indexOf(file.name) !== -1) {
                    alert('图片已上传，请勿重复上传');
                    continue;
                }
                console.log("传递的file：",file);
                imageLoad(file);
            }
        });

        // 监听删除按钮点击事件
        $('.img-container').on('click', '.delete-btn', function() {
            var imgSrc = $(this).siblings('img').attr('src');
            console.log("imgsrc"+imgSrc);
            console.log("imgSrc.substring(imgSrc.indexOf(',') + 1)",imgSrc.substring(imgSrc.indexOf(',') + 1))
            var index = uploadedImages.indexOf(imgSrc.substring(imgSrc.indexOf(',') + 1));
            if (index !== -1) {
                uploadedImages.splice(index, 1);
            }
            $(this).parent().remove();
        });

        // 监听表单提交事件
        $('#upload-form').on('submit', function(e) {
            e.preventDefault();
            var formData = new FormData();
            fileList.forEach((item) => {
                console.log(item);
                formData.append("files", item);
            });
            var userId = "[[${userId}]]"
            formData.append("userId",userId);
            formData.append("isAvatar",false);
            $.ajax({
                url: '/file/photo/upload',
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                success: function(res) {
                    alert('上传成功');
                    $(".img-container").empty();
                    uploadedImages = [];
                    fileList = [];
                },
                error: function(err) {
                    alert('上传失败');
                }
            });
        });
        // 点击返回按钮
        $('#backBtn').click(function() {
            var fileId = "[[${fileId}]]"
            window.location.href = '/uploadUser/' + fileId;
        })

        // 发送审核不通过请求
        function imageLoad(file) {
            var reader = new FileReader();
            reader.onload = function(e) {
                var img = $('<img>').attr('src', e.target.result);
                var deleteBtn = $('<button>').addClass('delete-btn').text('×');
                var item = $('<div>').addClass('img-item').append(img, deleteBtn);
                $('.img-container').append(item);
                uploadedImages.push(file.name);
                fileList.push(file);
            };
            reader.readAsDataURL(file);
        }

    });
</script>
</body>
</html>